<template>
  <div class="main-con flex1">
    <el-card class="flex1" style="width:800px;">
      <div slot="header">资源菜单管理</div>
      <el-tree
        :data="resTreeData"
        node-key="id"
        :default-expanded-keys="[1]"
        :expand-on-click-node="false"
        ref="resTree"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>
            <i v-if="data.icon" :class="['fa','fa-'+data.icon]" style="color:#409EFF;width:18px;"></i>
            {{ data.name }}
            <span style="color:#E6A23C">{{"【"+data.resTypeName+"】"}}</span>
          </span>
          <span>
            <el-button
              type="text"
              v-auth="'add'"
              size="mini"
              @click="() => optionHandler('add',data)"
            >子资源</el-button>
            <el-button
              type="text"
              v-auth="'edit'"
              size="mini"
              @click="() => optionHandler('edit', data)"
            >编辑</el-button>
            <el-button
              type="text"
              v-auth="'delete'"
              size="mini"
              @click="() => optionHandler('delete', data)"
            >删除</el-button>
          </span>
        </span>
      </el-tree>
    </el-card>
    <el-dialog
      :visible.sync="showResDialog"
      title="添加资源"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="resForm" :rules="rules" :model="res" label-width="95px">
        <el-form-item label="父菜单" prop="parentId">
          <el-tree-select
            :defaultShowLabel="res.parentName"
            v-model="res.parentId"
            @node-click="resSelect"
            :url="treeUrl"
            label="name"
            placeholder="请选择父级菜单"
          />
        </el-form-item>
        <el-form-item label="资源名称" prop="name">
          <el-input v-model.trim="res.name" placeholder="请输入资源名称"/>
        </el-form-item>
        <el-form-item label="资源编码" prop="code">
          <el-input v-model.trim="res.code" placeholder="请输入资源编码"/>
        </el-form-item>
        <el-form-item label="资源类型" prop="type">
          <el-select v-model="res.type" placeholder="请选择资源类型" style="width:100%">
            <el-option
              v-for="item in resTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="res.type == 2" label="组件路径" prop="resPath">
          <el-input v-model.trim="res.resPath" placeholder="请输入组件路径"/>
        </el-form-item>
        <el-form-item label="是否子节点" prop="leaf">
          <el-radio-group v-model="res.leaf">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序号" prop="sortBy">
          <el-input-number :min="1" v-model.trim="res.sortBy"/>
        </el-form-item>
        <el-form-item label="资源图标" prop="icon">
          <el-input v-model.trim="res.icon" placeholder="请输入资源图标代码">
            <el-button slot="append" icon="el-icon-search" @click="goFontasw"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveRes">保存</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    let me = this;
    return {
      showResDialog: false,
      tableUrl: "admin/getResListByAdminId/" + me.$store.state.admin.id,
      treeUrl: "admin/getResByAdminId/" + me.$store.state.admin.id,
      resTreeData: [],
      resTypes: [
        { label: "目录", value: 1 },
        { label: "菜单", value: 2 },
        { label: "按钮", value: 3 },
        { label: "其它", value: 4 }
      ],
      res: {
        sortBy: 1,
        type: 2,
        resPath: "",
        name: "",
        code: "",
        icon: "",
        id: "",
        parentId: "",
        parentName: "",
        leaf: 1
      },
      rules: {
        parentId: [
          { required: true, message: "请选择父资源", trigger: "blur" }
        ],
        name: [{ required: true, message: "请输入资源名称", trigger: "blur" }],
        code: [
          { required: true, message: "请输入资源编码", trigger: "change" }
        ],
        type: [{ required: true, message: "请选择资源类型", trigger: "change" }]
      },
      optionBtns: [
        { text: "子资源", code: "add" },
        { text: "编辑", code: "edit" },
        { text: "删除", code: "delete" }
      ],
      columns: [
        { prop: "resTypeName", label: "资源类型", width: 100 },
        { prop: "code", label: "资源编码" },
        { prop: "resPath", label: "资源路径" },
        { prop: "sortBy", label: "排序号", width: 100 }
      ]
    };
  },
  watch: {
    "res.parentId"(v) {}
  },
  created() {
    this.getResByAdminId();
  },
  methods: {
    getResByAdminId() {
      let me = this;
      me.$http.ajax({
        url: "admin/getResByAdminId/" + me.$store.state.admin.id,
        success(res) {
          me.resTreeData = res;
        }
      });
    },
    resSelect(resId) {
      this.res.parentId = resId;
    },
    goFontasw() {
      window.open("http://fontawesome.dashgame.com/", "_blank");
    },
    optionHandler(code, row) {
      if (code == "add") {
        this.addRes(row);
      } else if (code == "edit") {
        this.editRes(row);
      } else if (code == "delete") {
        this.deleteRes(row);
      }
    },
    addRes(data) {
      let me = this;
      me.showResDialog = true;
      me.$nextTick(() => {
        me.$refs["resForm"].resetFields();
        let tempData = Object.assign({}, data);
        me.res.parentId = tempData.id;
        me.res.parentName = tempData.name;
        me.res.id = "";
        me.res.level = parseInt(tempData.level) + 1;
      });
    },
    editRes(data) {
      let me = this;
      me.res.parentName = "";
      me.showResDialog = true;
      me.$nextTick(() => {
        let tempData = Object.assign({}, data);
        me.res = tempData;
      });
    },
    deleteRes(data) {
      let me = this;
      me.$confirm("确定要删除选中行数据吗?", "操作提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        me.$http.ajax({
          url: "resource/delete/" + data.id,
          success: res => {
            me.$message.success("删除成功");
            me.getResByAdminId();
          }
        });
      });
    },
    search() {
      let me = this;
      me.$refs["resTable"].loadData();
    },
    saveRes() {
      let me = this;
      me.$refs["resForm"].validate(valid => {
        if (valid) {
          me.$http.ajax({
            url: "resource/save",
            data: me.res,
            success: res => {
              me.$message.success("保存成功");
              me.showResDialog = false;
              me.getResByAdminId();
            }
          });
        }
      });
    },
    reset() {}
  }
};
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
